<template>
	<template v-if="hasSlot(item.name)">
		<component
            v-if="item.visible"
			:is="slots[item.name]"
			:rowData="{ item, loading }"
			@itemClick="handleItemClick"
		></component>
	</template>
	<ToolbarItem
		v-else-if="!hasChildren && item.visible"
		v-bind="$props"
		@itemClick="handleItemClick"
		>
	</ToolbarItem>
	<a-dropdown
		v-else-if="hasChildren"
		v-model="show"
		overlayClassName="app-view-toolbar__transfer"
		placement="bottomRight"
		:trigger="['click']"
	>
		<AppButton>
			<AppIconText 						
                :imgPath="item.imagePath"
                :imgPathX="item.imagePathX"
                :imgSize="item.imageSize"
				:iconClass="item.iconClass"
                :loading="loading"
				:text="
					item.captionLanResTag
						? $t(item.captionLanResTag, item.caption)
						: item.caption
				"
				:tooltip="
					item.tooltipLanResTag
						? $t(item.tooltipLanResTag, item.tooltip)
						: item.tooltip
				">
            </AppIconText>
		</AppButton>
		<template #overlay>
			<a-menu>
				<template v-for="children in item.items" :key="children.codeName">
					<a-menu-item>
						<ToolbarItem
                            v-if="children.visible"
							:item="children"
							:loading="loading"
							@itemClick="handleItemClick"
						>
                            <template v-if="slots[children.name]">
                                <component
                                    :is="slots[children.name]"
                                    :rowData="{ item, loading }"
                                    @itemClick="handleItemClick"
                                ></component>
                            </template>
					    </ToolbarItem>
					</a-menu-item>
				</template>
			</a-menu>
		</template>
	</a-dropdown>
</template>

<script setup lang="ts">
import { toolbarItemProps } from '../toolbar';
import ToolbarItem from './toolbar-item.vue';
import { IParam } from '@/core';
const props = defineProps(toolbarItemProps);
const emit = defineEmits(['itemClick']);
const hasChildren = computed(() => {
	const { item } = props;
	if (item.itemType === 'ITEMS' && item.items && item.items.length > 0) {
		return true;
	}
	return false;
});

const show = ref(false);

const handleItemClick = (tag: string, event: MouseEvent, logic: IParam) => {
	emit('itemClick', tag, event, logic);
};
const hasSlot = (name: string) => {
	return !!props.slots[name];
};

</script>
